<template>
	<view class="center-phone">
		<u-navbar
			back-icon-name="arrow-left"
			title-size="32"
			title-color="#000"
			:title="title" :title-bold="true"
			>
			
			<view class="navbar-right" slot="right">
				<view
					v-if="check == 1"
					class="message-box right-item"
					style="padding-right: 30rpx; color: #FE2347;">
					删除
				</view>
			</view>
		</u-navbar>
		<view class="center-box-p ">
			<view class="fiex-check" v-for="(item, index) in img" :key="index">
				<image @longtap="longtapRemove" :src="item.albumImg" mode=""></image>
				<u-checkbox
					v-model="item.value"
					shape="circle"
					v-if="check == 1"
					active-color="#6A5658"
					@change="checkboxGroupChange"
					:name="index">
				</u-checkbox>
			</view>
			<u-upload v-if="check == 2" @on-success="onSuccess"
				@on-remove="removeImg" :show-progress="false"
				:deletable="false" 
				:header="header" :form-data="formData"
				width="165" height="165" :action="action">
			</u-upload>
			<!-- <view class="w100 h100" @click="uploadUrl">
				111
			</view> -->

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '免费相册',
				// action: 'http://wzs.vipgz1.idcfengye.com/api/user/album/upload',
				action: this.UPLOADFILE,
				check: 2,
				img: [],
				imgUrl: '',
				isFee: '',
				formData: {
					id: uni.getStorageSync('userInfo').id,
				},
				header: {
					token: uni.getStorageSync('userInfo').token,
				}
			}
		},
		onLoad(e) {
			
			if (e.classText == 8) {
				this.title = '付费相册'
				this.isFee = 1
				this.getPhoneList()
			} else {
				this.title = '免费相册'
				this.isFee = 0
				this.getPhoneList()
			}
			console.log(this.isFee)
		},
		onShow() {
			this.formData.isFee = this.isFee
		},
		methods: {
			checkboxGroupChange(e) {
				console.log(e);
			},
			
			longtapRemove(e) {
				this.check = 1
				console.log('e==>', e);
			},
			
			uploadUrl() {
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: this.UPLOADFILE, //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                id: uni.getStorageSync('userInfo').id,
								isFee: this.isFee
				            },
							header: {
								token: uni.getStorageSync('userInfo').token,
							},
				            success: (uploadFileRes) => {
				                console.log(uploadFileRes.data);
				            }
				        });
				    }
				});
			},
			
			async getPhoneList() { 
				const res = await this.$u.get(`api/user/album/list/${this.isFee}`)
				this.img = res.data
			},
			
			// 移除
			removeImg() {
				this.imgUrl = ''
			},
			
			// 上传
			onSuccess(e) {
				this.imgUrl = e.data
				this.uploadImg()
			},
			
			async uploadImg() {
				const res = await this.$u.post('api/user/album/upload',{
					albumImg: this.imgUrl,
					isFee: this.isFee
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.center-phone {


		.center-box-p {
			padding: 30rpx 30rpx 0 30rpx;
			display: flex !important;
			flex-wrap: wrap;

			image {
				width: 165rpx;
				height: 165rpx;
				border-radius: 10rpx;
				word-wrap: break-word;
				word-break: normal;
				margin: 0 5rpx 10rpx 5rpx;
			}

			image:nth-child(4n+0) {
				margin-right: 0;
			}

			.fiex-check {
				position: relative;


				.u-checkbox {
					position: absolute;
					top: 10rpx;
					right: -10rpx;
				}
			}
		}

	}
</style>
